<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>用户注册</title>
	<link rel="stylesheet" href="./css/base.css" type="text/css">
	<link rel="stylesheet" href="./css/global.css" type="text/css">
	<link rel="stylesheet" href="./css/header.css" type="text/css">
	<link rel="stylesheet" href="./css/login.css" type="text/css">
	<link rel="stylesheet" href="./css/footer.css" type="text/css">
</head>
<body>
	<!-- 顶部导航 start -->
	<div class="topnav">
		<div class="topnav_bd w990 bc">
			<div class="topnav_left">
				
			</div>
			<div class="topnav_right fr">
				<ul>
					<li>您好，欢迎来到京西！[<a href="login.html">登录</a>] [<a href="register.html">免费注册</a>] </li>
					<li class="line">|</li>
					<li>我的订单</li>
					<li class="line">|</li>
					<li>客户服务</li>

				</ul>
			</div>
		</div>
	</div>
	<!-- 顶部导航 end -->
	
	<div style="clear:both;"></div>

	<!-- 页面头部 start -->
	<div class="header w990 bc mt15">
		<div class="logo w990">
			<h2 class="fl"><a href="index.html"><img src="./imgs/logo.png" alt="京西商城"></a></h2>
		</div>
	</div>
	<!-- 页面头部 end -->
	
	<!-- 登录主体部分start -->
	<div class="login w990 bc mt10 regist">
		<div class="login_hd">
			<h2>用户注册</h2>
			<b></b>
		</div>
		<div class="login_bd">
			<div class="login_form fl">
				<form action="" method="post">
					<ul>
						<li>
							<label for="">用户名：</label>
							<input type="text" class="txt" name="username" />
							<p>3-20位字符，可由中文、字母、数字和下划线组成</p>
						</li>
						<li>
							<label for="">密码：</label>
							<input type="password" class="txt" name="password" />
							<p>6-20位字符，可使用字母、数字和符号的组合，不建议使用纯数字、纯字母、纯符号</p>
						</li>
						<li>
							<label for="">确认密码：</label>
							<input type="password" class="txt" name="password" />
							<p> <span>请再次输入密码</p>
						</li>
						<li class="checkcode">
							<label for="">验证码：</label>
							<input type="text"  name="checkcode" />
							<img src="http://kg.zhaodashen.cn/v1/public/captcha.jsp" alt="" />
							<span>看不清？<a href="">换一张</a></span>
						</li>
						<li>
							<label for="">&nbsp;</label>
							<input type="checkbox" class="chb" checked="checked" /> 我已阅读并同意《用户注册协议》
						</li>
						<li>
							<label for="">&nbsp;</label>
							<input type="submit" value="" class="login_btn" />
						</li>
					</ul>
				</form>

				
			</div>
			
			<div class="mobile fl">
				<h3>手机快速注册</h3>			
				<p>中国大陆手机用户，编辑短信 “<strong>XX</strong>”发送到：</p>
				<p><strong>1069099988</strong></p>
			</div>

		</div>
	</div>
	<!-- 登录主体部分end -->

	<div style="clear:both;"></div>
	<!-- 底部版权 start -->
	<div class="footer w1210 bc mt15">
		<p class="links">
			<a href="">关于我们</a> |
			<a href="">联系我们</a> |
			<a href="">人才招聘</a> |
			<a href="">商家入驻</a> |
			<a href="">千寻网</a> |
			<a href="">奢侈品网</a> |
			<a href="">广告服务</a> |
			<a href="">移动终端</a> |
			<a href="">友情链接</a> |
			<a href="">销售联盟</a> |
			<a href="">京西论坛</a>
		</p>
		<p class="copyright">
			 © 2005-2013 京东网上商城 版权所有，并保留所有权利。  ICP备案证书号:京ICP证070359号 
		</p>
		<p class="auth">
			<a href=""><img src="./imgs/xin.png" alt="" /></a>
			<a href=""><img src="./imgs/kexin.jpg" alt="" /></a>
			<a href=""><img src="./imgs/police.jpg" alt="" /></a>
			<a href=""><img src="./imgs/beian.gif" alt="" /></a>
		</p>
	</div>
	<!-- 底部版权 end -->
	<script src="./js/jquery-1.8.3.min.js"></script>
	<script src=" https://www.geetest.com/demo/libs/gt.js"></script>
<script>
// --------------------------------------默认的代码不用管--------------------------------------------------------------------
	// 收集一些用户的信息
	    $.ajax({
        url: " https://www.geetest.com/demo/gt/register-slide?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {

            // 调用 initGeetest 进行初始化
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
            initGeetest({
                // 以下 4 个配置参数为必须，不能缺少
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success, // 表示用户后台检测极验服务器是否宕机
                new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机

                product: "bind", // 产品形式，包括：float，popup
                width: "300px",
                https: true,
                api_server: "apiv6.geetest.com"

                // 更多配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
            }, handler);
        }
    });

	// ----------------------------------------------------------------------------------------------------------



	var handler = function (captchaObj) {
        captchaObj.onReady(function () {
            $("#wait").hide();
        }).onSuccess(function () {
            var result = captchaObj.getValidate();
            if (!result) {
                return alert('请完成验证');
            }
 /* ----------------------------------------------写你的代码就行----------------------------譬如验证成功
		   alert（成功） */
 //   2.2获取输入数据 过滤
		let uname=$('input[name="username"]').val()
		let pwd=$('input[name="password"]').eq(0).val()
		let pwd2=$('input[name="password"]').eq(1).val()
		let captcha=$('input[name="checkcode"]').val()
		if(pwd != pwd2){
			alert('两次输入的密码不一致')
			return //退出函数，终止代码执行
		}
	//   2.3请求接口
	$.post('http://kg.zhaodashen.cn/v1/public/reg.jsp',{uname,pwd,captcha},res=>{
		// console.log(res);
		if(res.meta.state==201)
		{
			alert('注册成功，跳转登录...')
			location.href='./login.html'
		}else{
			alert(res.meta.msg)
		}
	},'json')
        });


		$('.login_btn').click(function(e){
	//   2.1 阻止表单提交
		e.preventDefault()
		//极客验证
		captchaObj.verify();

        // $('#btn').click(function () {
        //     // 调用之前先通过前端表单校验
		// 	/* 触发验证 */
        //     captchaObj.verify();
        // });
        // 更多接口说明请参见：http://docs.geetest.com/install/client/web-front/
	})
    };



	// 注册
	// 1.绑定点击事件
	// 2.处理函数中
	//   2.1 阻止表单提交
	//   2.2获取输入数据 过滤
	//   2.3请求接口
	//   2.4失败-提示，成功-提示、跳转登录

	// $('.login_btn').click(function(e){
	// //   2.1 阻止表单提交
	// 	e.preventDefault()


	// 	//极客验证
	// 	captchaObj.verify();


	// //   2.2获取输入数据 过滤
	//     let uname=$('input[name="username"]').val()
	// 	let pwd=$('input[name="password"]').eq(0).val()
	// 	let pwd2=$('input[name="password"]').eq(1).val()
	// 	let captcha=$('input[name="checkcode"]').val()
	// 	if(pwd != pwd2){
	// 		alert('两次输入的密码不一致')
	// 		return //退出函数，终止代码执行
	// 	}
	// //   2.3请求接口
	// $.post('http://kg.zhaodashen.cn/v1/public/reg.jsp',{uname,pwd,captcha},res=>{
	// 	if(res.meta.state==201)
	// 	{
	// 		alert('注册成功，跳转登录...')
	// 		location.href='./login.html'
	// 	}else{
	// 		alert(res.meta.msg)
	// 	}
	// },'json')
	//   2.4失败-提示，成功-提示、跳转登录
	// })
</script>
</body>
</html>